<template>
	<view class="page">
		<view class="wrapper">
			<view class="cu-bar search">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input style="color: #B2B2B9;" @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
				</view>
			</view>
			
			<scroll-view scroll-x class="bg-white nav">
				<view class="flex text-center">
					<view
						class="cu-item flex-sub"
						:class="index==TabCur?'active cur':''"
						v-for="(item,index) in menu"
						:key="index"
						@tap="tabSelect"
						:data-id="index">
							{{item}}
					</view>
				</view>
			</scroll-view>
			
			<view class="list">
				<view class="card" v-for="(i,k) in 1" :key="k">
					<view class="pic">
						<image class="img" src="" mode="aspectFill"></image>
					</view>
					<view class="name">
						商品上架中
					</view>
				</view>
			</view>
		</view>
		
		<my-shopnav></my-shopnav>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				TabCur: 0,
				scrollLeft: 0,
				menu: ['手机', '厨电', '家电', '烹饪', '矿机']
			}
		},
		onLoad() {
			this.getList();
		},
		methods: {
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			getList() {
				this.$u.get('/goods/list').then(res => {
					console.log(res)
				})
			}
		}
	}
</script>

<style scoped>
	@import url("/colorui/main.css");
	@import url("/colorui/icon.css");
	
	.cu-bar .search-form {
		background: #434657;
	}
	.cuIcon-search,
	.uni-input-placeholder {
		color: #B2B2B9;
	}
	
	.nav {
		background: #242644;
		color: #B9B9C1;
	}
	.nav .active {
		color: #00D388;
	}
	
	.list {
		margin-top: 50rpx;
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
	}
	.list .card {
		margin-bottom: 30rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}
	.list .card .pic {
		width: 330rpx;
		height: 330rpx;
		background: #434657;
	}
	.list .card .img {
		width: 100%;
		height: 100%;
	}
	.list .card .name {
		background: #1B1B3B;
		padding: 20rpx;
		text-align: center;
	}
	
	.tabbar {
		background-color: #434657;
		position: fixed;
		width: 100%;
		z-index: 999;
		bottom: 0;
		margin: 0;
	}
</style>
